<template>
	<div class="tab-content">
		<div class="form-item cf material-block">
			<div class="controls">
				<div class="check-item">
					<input type="radio" name="material_stype_type" id="material_stype_text" value="text" class="regular-radio" v-on:click="changeOption()" v-model="checkedValue" checked="checked"> <label for="material_stype_text"></label>文本
				</div>
				<div class="check-item">
					<input type="radio" name="material_stype_type" id="material_stype_img" value="img" class="regular-radio" v-on:click="changeOption()" v-model="checkedValue" > <label for="material_stype_img"></label>
					图片
				</div>
				<div class="check-item">
					<input type="radio" name="material_stype_type" id="material_stype_news" value="news" class="regular-radio" v-on:click="changeOption()" v-model="checkedValue"> <label for="material_stype_news"></label>图文
				</div>
				<div class="check-item">
					<input type="radio" name="material_stype_type" id="material_stype_voice" value="voice" class="regular-radio" v-on:click="changeOption()" v-model="checkedValue"> <label for="material_stype_voice"></label>语音
				</div>
				<div class="check-item">
					<input type="radio" name="material_stype_type" id="material_stype_video" value="video" class="regular-radio" v-on:click="changeOption()" v-model="checkedValue"> <label for="material_stype_video"></label>视频
				</div>
			</div>
		</div>
		<div class="row">
			<div class="offset-sm-2 col-sm-4" style="padding-left: 0">
				<button type="submit" class="btn submit-btn ajax-post" target-form="form-horizontal">确 定</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data(){
		return {
			checkedValue:''
		}
	},
	methods:{
		changeOption:function(){
			alert(this.checkedValue);
			this.axios.get('http://www.weixingo.hk/Languagelist_text')
			.then((response) => {
			console.log(response);
			})
			.catch(function (error){
				console.log(error);
			})
		}
	}
	
}

</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.image_material, .text_material, .voice_material, .video_material {
	display: block;
	border: 1px dashed #ddd;
	width: 308px;
	height: auto;
	background: #eee;
	text-align: center;
	color: #333;
	display: block;
	float: left;
	position: relative;
}

.image_material .select_image, .voice_material .select_voice,
	.video_material .select_video, .text_material .select_text {
	line-height: 196px;
	display: block;
	height: 200px;
}

#voice_area, #video_area, #image_area {
	position: relative;
}

#image_area .delete, #voice_area .delete, #video_area .delete,
	.text_material .delete {
	position: absolute;
	top: 1px;
	white-space: nowrap;
	display: none;
}

.appmsg_item {
	padding: 15px;
	width: 278px;
}



#image_area .image_wrap {
	border: 1px dashed #ddd;
	width: 308px;
	display: none;
}

.video_wrap, .voice_wrap {
	background: #fff;
}

.voice_wrap {
	width: 308px;
	float: left
}

.video_wrap {
	width: 222px;
}

.select_video, .select_voice, .select_image {
	height: 240px;
	line-height: 240px;
	cursor: pointer
}
.sound_item {
    min-height: 80px;
    padding: 10px;
    width: 100%;
}
.audio_name .colorless {
    display: block;
}


/* 选择类型文本换行 */
.text_wrap {
    padding: 15px;
    word-wrap: break-word;
    text-align: left;
}

.m-voice {
  height: 80px;
}
.picture_item {
    border: 0;
    background: #f9f9f9;
}

.picture_item .m-img {
  display: block;
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 10px;
}
.sound_item .ctime {padding-top: 0;}
.material_list li {border:0;}
.picture_item .sound_item{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
.material_list img {
    max-width: initial;
}
.sound_item .icon_sound {
    position: static;
}
.picture_item .content{
    margin-left: 1em;
}
.picture_item .content{
    overflow: hidden;
    flex: 1;
}
.appmsg_dialog .material_list li {
    position: static!important;
    background: #f9f9f9;
    max-height: 300px;
}
.material_list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    height: auto;
}
</style>
